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Een interactieve webpagina maken via slicing 


De delen van 


Heel wat professionele websitebouwers stellen hun ho- 
mepage eerst samen ín een fotobewerkingsprogramma 
om hem daarna te vertalen in een webcode als html. 
De grafische mogelijkheden van je fotobewerker zijn 
dan ook veel veelzijdiger dan die van om het even welk 
webdesignpakket. 4 orx scoors 


WAT DOEN WE? 


WAARMEE? 


HOELANG? 


À M et een fotobewerker doe je lekker je zin, 

zonder daarbij rekening te moeten houden 
met tabellen en allerlei knoestige codes die creati- 
viteit in de weg staan. Een extra argument om een 
homepagina eerst in een fotobewerker samen te 
stellen, is dat je hiermee de hele afbeelding kan 
segmenteren of slicen. Dat betekent dat je de hele 
compositie versnijdt in interactieve stukken, nadat 
je de homepage hebt samengesteld uit verschillende 
elementen. Met behulp van de html-code wordt de 
afbeelding later bij elkaar gehouden. Een afbeelding 
versnijden om later opnieuw samen te voegen lijkt 
misschien een beetje idioot, maar het is superhandig 
als je met rollovers wil werken. Grafische elementen 
D — zoals tekstknoppen — die van kleur of vorm veran- 


deren als je er met de muis over beweegt of als je er op klikt, noemen 
we ‘rollover images’. Technisch gaat het om twee afbeeldingen die elkaar 
afwisselen bij de gebeurtenis Mouse-over. Als zo’n element verandert, 
is het natuurlijk de bedoeling dat alleen dat ene grafische element 
opnieuw wordt ingeladen en niet de hele homepage. 


STAP 1 / HET ONTWERP 


We vertrekken van een homepage voor padvinders, die we hebben sa- 
mengesteld uit acht elementen. Omdat we die elementen hebben ge- 
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De afbeelding bestaat uit verschillende lagen. 
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het geheel 


plakt of met het tekstgereedschap hebben aangebracht, staan ze veilig 
op 8 verschillende lagen. In het palet Lacen zie je dus van onder naar 
boven (zie afbeelding 1): 


1 de groene achtergrond 

2 de afbeelding van de pad 
3 de afbeelding van de lens 
A het woord ‘Fotogalerij’ 

5 het woord ‘Locaties’ 

6 het woord ‘Uitrusting’ 

7 het woord ‘Contact’ 

8 de titel ‘Pad-Vinder”’. 


We willen dat er een grafisch effect verschijnt als een bezoeker met 
de muisaanwijzer over het woord ‘Locaties’ gaat. Daarnaast moet de 
webpagina Locaties.html openen, zodra je op het woord klikt. Het moet 
dus een interactieve rollover-knop worden. 


STAP 2 / SEGMENTEREN 


Er zijn twee gereedschappen die je gebruikt om te segmenteren of te 
slicen. Enerzijds is er het gereedschap Seament om segmenten te maken; 
net daaronder staat het gereedschap SeaMentseLEcTiE om segmenten te 
selecteren, te wijzigen en te benoemen. 

Selecteer het gereedschap Seament en sleep daarmee een rechthoek 
over het woord Fotogalerij. Je merkt dat het programma niet alleen 
de knop, maar de hele afbeelding versnijdt. 

De afbeelding is nu verdeeld in het segment dat je zelf hebt gemaakt, 
en de aanvullende, automatische segmenten die de rest van de afbeel- 
ding vullen. Alle segmenten worden in eerste instantie genummerd van 
boven naar onder en van links naar rechts. 

Klik op een van de benedenhoekgrepen van de bovenste knop en trek 
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Snij de vier knoppen netjes uit. 


een nieuw segment over de tweede knop. Je herhaalt dit tot de vier 
knoppen uitgesneden zijn (zie afbeelding 2). 


STAP 3 / SEGMENTEN BENOEMEN 


Met de acht grepen en het gereedschap Segmentselectie kan je te al- 
len tijde de grootte en de positie van ieder segment wijzigen. Selecteer 
het gereedschap SeamentseLectie. Klik op een van de hendeltjes en ver- 
sleep het, tot het segment net zo groot is als je zelf wil. 

Om het je straks gemakkelijk te maken, geef je deze segmenten best een 
betekenisvolle naam. Dubbelklik dus met het gereedschap SEGMENTSELECTIE 
op het segment waar je de knop ‘Fotogalerij’ hebt uitgesneden. Het ven- 
ster SEGMENToPTIEs verschijnt. Bij het vak Naam geef je ‘Fotogalerij’ in (zie 
afbeelding 3). In principe kan je hier ook de url ingeven van de webpa- 
gina die moet geopend worden als de webbezoeker op deze knop klikt. 
Met het vak Doe stel je in op welke manier de webpagina zal openen. 
Verschijnt die in een nieuw browservenster of vervangt hij de open- 
staande webpagina? Ook de drie andere segmenten geef je de naam van 
hun knop. 


_ Segmenttype: (atveeldra rl — 
ia [rotoase O Annuleren | 
URI 
Doel: B 
Meldingtekst: | 
Alt-markering: ennn 


Dimensies 


x: [542 Wi: [228 
ee [348 H: [45 


Achtergrondtype segment: Geen | Achterarandkleur: 


Geef je segmenten een duidelijke naam. 


STAP 4 / HTML-CODE GENEREREN 


Vervolgens kies je BestanD, OPsLAAN voor weB. Met deze opdracht zal je 
zo dadelijk de webpagina wegschrijven — inclusief de segmenten — 
maar eerst kan je de webafbeelding nog optimaliseren. 

Omdat het grotendeels om afbeeldingen gaat, kies je voor het jpeg- 
formaat. Als je alleen tekst zou hebben, is gif een betere keuze. Zet 


IMAGEREADY? 


Webpagina's aansturen doe je best niet in Photoshop. We geven er zelfs de 
voorkeur aan om ImageReady links te laten liggen, hoewel dat programma 
speciaal ontwerpen werd om webplaatjes en rollovers te maken. Het zat 
bijgevoegd bij recente versies van Photoshop. 

Er zijn twee redenen waarom je ImageReady best laat voor wat het is. Ten 
eerste hebben we gemerkt dat het rolloverscript dat dit programma produ- 
ceert soms door webbrowsers wordt tegengehouden, tenzij je het expliciet 
toestaat. Dat gedoe willen we voorkomen. Ten tweede schuift Adobe zelf zijn 
webprogramma naar het verdomhoekje. In de laatste Photoshop-versie wordt 
deze toepassing in ieder geval niet langer meegeleverd. 


opslaan voor web: geleverd door ImageReady 
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Ondanks de sterke compressie boet je afbeelding niet in aan kwaliteit. 


de kwaliteit op Hren. Dat betekent dat alle lagen van ons webplaatje 
samengevoegd worden. Geen probleem: met de opdracht Opstaan voor 
weB bewaar je een kopie, terwijl het originele bestand met de oor- 
spronkelijke lagen onaangeroerd blijft. 

In het begin zal je zien dat alleen de segmenten helder worden afge- 
beeld in het preview-venster. Om alles even helder te zien, klik je op 
de zesde knop van linksboven (Toacte Strces Vrsigrrry). Linksboven kan 
je de vensters zo instellen dat je het originele bestand kan vergelijken 
met het geoptimaliseerde bestand. Op die manier kan je de compressie 
regelen zonder dat de afbeelding aan visuele kwaliteit moet inboeten. 
Het originele werkbestand (psd) is 1,67 MB groot, maar na optimalisa- 
tie blijft er slechts 191 KB over (zie afbeelding 4). Als je op Save klikt, 
vraagt het programma waar het de html-pagina en alle afbeeldingen 
moet wegschrijven. Een seconde later staat het webbestand Padvinder. 
html en daarnaast een mapje Images — met daarin alle afbeeldingen 
— op onze harde schijf. 


STAP 5 / ROLLOVER-EFFECTEN TOEVOEGEN 


Een homepage moet de naam index.html dragen. Open de pagina Pad- 
vinder.html dus in Dreamweaver en bewaar hem onder de naam index. 
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Open het bestand in DreamWeaver. 
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html (zie afbeelding 5a). Daarna ga je terug naar Photoshop. Nu zullen 
we een leuk effect bedenken dat te zien zal zijn als de muisaanwijzer 
over de knop gaat. Je klikt in het palet Lacen op de laag van de tekst 
‘Fotogalerij’. Daarna vind je in het menu bij Laas de opdracht LaaastiL 
en daar kies je Groep Burren, zodat het lijkt alsof de woorden beginnen 
te gloeien (zie afbeelding 5b). Klik vervolgens met de rechtermuisknop 
in het palet Lagen op de laag waarop je daarnet de laagstijl hebt toe- 
gepast en gebruik de opdracht LaaasrtiJL Kopiëren. Ten slotte klik je met 
de rechtermuisknop op de andere drie tekstlagen, waar je de opdracht 
LAAGSTIJL PLAKKEN toepast. 


Gloeiende letters? Geen probleem! 


STAP 6 / ROLLOVER-SEGMENTEN WEGSCHRIJVEN 


Om het jezelf gemakkelijk te maken, geef je deze vier nieuwe seg- 
menten best een andere naam. Dubbelklik er op met het gereedschap 
SEGMENTSELECTIE en noem ze ‘FotogalerijB’, ‘LocatiesB’, ‘UitrustingB’ en 
‘ContactB’. Vervolgens kies je weer de opdracht Bestanp, OPsLAAN voor 
weB. Ook hier zullen we het ons gemakkelijk maken. Selecteer het 
bekende gereedschap SEGMENTseLEctie, dat je linksboven vindt. Houd 
Suit ingedrukt en klik op de vier knopsegmenten die je daarnet hebt 
gewijzigd om ze allemaal tegelijk te selecteren. Vervolgens klik je op 
Save. In het volgende venster kies je in het vak SEamenTEN dat alleen 
de Setectep Suices moeten worden weggeschreven (zie afbeelding 6). 
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Bewaar alleen de segmenten. 


Klik op Opstaan. Daarna vraagt een volgend venster of het html-be- 
stand overschreven moet worden. Dat weiger je. Vanaf nu kan je 
Photoshop afsluiten. 


STAP 7 / DE CODE VOOR DE ROLLOVER 


In Dreamweaver kies je voor Desrenview. Daarna klik je op de eerste 
knop ‘Fotogalerij’ van de homepage en die wis je met de Derere-toets. 
Vervolgens kies je Insert, IMaaE OgJects, RoLLover Imac. Bij het vak Orr- 
GINAL Image navigeer je via de knop Browse naar de originele afbeelding, 
dus die waarop je de laagstijl van daarnet nog niet hebt toegepast. 
Daarna doe je bijna hetzelfde voor het vak RorLover rmace, maar hier 
selecteer je het bestand waar je daarnet een B bij hebt geplaatst. We 
vinken de optie PRELOAD ROLLOVER IMAGE aan, zodat er geen vertraging te 
zien zal zijn tijdens de rollover-actie. Je kan nog een alternatieve 
tekst ingeven voor surfers die geen afbeeldingen kunnen of willen 
zien. Ten slotte geef je de url in van de webpagina die geopend moet 
worden. 

Klik op OK om de rollover te laden. Dit herhaal je voor de andere drie 
knoppen (zie afbeelding 7). Het enige wat je nu nog moet doen, is de 
pagina opladen naar de server via SenD. « 


so Mt. ©. 
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De laatste stap. 


